import React, {Component} from 'react'
import {createBottomTabNavigator} from 'react-navigation'
import {connect} from 'react-redux'
import {BottomTabBar} from 'react-navigation-tabs'
import MinaIcon from '../components/MinaIcon.js'


// 页面导入
import Home from '../page/home/Home.js'
import HomeWork from '../page/homework/HomeWork.js'
import Course from '../page/course/Course.js'
import Mall from '../page/mall/Mall.js'
import MySelf from '../page/myself/MySelf.js'

type Props = {};
const mainNavTabs = {
  Home: {
    screen: Home,
    navigationOptions: {
      tabBarLabel: "首页",
      tabBarIcon: ({tintColor, focused}) => (
        <MinaIcon
          name={'MinaIcon|tab_icon_home_pre'}
          size={26}
          style={{color: tintColor}}
        />
      )
    }
  },
  HomeWork: {
    screen: HomeWork,
    navigationOptions: {
      tabBarLabel: "作业",
      tabBarIcon: ({tintColor, focused}) => (
        <MinaIcon
          name={'MinaIcon|tab_icon_work_pre'}
          size={26}
          style={{color: tintColor}}
        />
      )
    }
  },
  Course: {
    screen: Course,
    navigationOptions: {
      tabBarLabel: "课程",
      tabBarIcon: ({tintColor, focused}) => (
        <MinaIcon
          name={'MinaIcon|tab_icon_course_pre'}
          size={26}
          style={{color: tintColor}}
        />
      )
    }
  },
  Mall: {
    screen: Mall,
    navigationOptions: {
      tabBarLabel: "商城",
      tabBarIcon: ({tintColor, focused}) => (
        <MinaIcon
          name={'MinaIcon|tab_icon_mall_pre'}
          size={26}
          style={{color: tintColor}}
        />
      )
    }
  },
  MySelf: {
    screen: MySelf,
    navigationOptions: {
      tabBarLabel: "我的",
      tabBarIcon: ({tintColor, focused}) => (
        <MinaIcon
          name={'MinaIcon|tab_icon_me_nor'}
          size={26}
          style={{color: tintColor}}
        />
      )
    }
  }
}

class DynamicMainNavigator extends Component<Props> {
  constructor(props){
    super(props)
  }
	mainNav(){
    if (this.Tabs) {
      return this.Tabs;
    }
		const {Home, HomeWork, Course, Mall, MySelf} = mainNavTabs;
    const mainNav = {Home, HomeWork, Course, MySelf};
    Home.navigationOptions.tabBarLabel='首页';
    return this.Tabs = createBottomTabNavigator(mainNav, {
      tabBarComponent: props => {
        return <TabBarComponent theme={this.props.theme} {...props}/>
      }
    })
	}
  render() {
    const MianNav = this.mainNav();
    return <MianNav/>
  }
}

class TabBarComponent extends React.Component {
  constructor(props) {
    super(props);
    this.theme = {
      tintColor: props.activeTintColor,
      updateTime: new Date().getTime(),
    }
  }

  render() {
    return <BottomTabBar
      {...this.props}
      activeTintColor={this.props.theme.themeColor}
    />
  }
}

const mapStateToProps = state => ({
  theme: state.theme.theme,
});

export default connect(mapStateToProps)(DynamicMainNavigator);

